@page "/Multiple_StepLine_Chart"

<Tabs>
    <TabPane Key="1">
        <Tab>示例1</Tab>
        <ChildContent>
            <StepLine Data=data1 Config="config1" />
        </ChildContent>
    </TabPane>
</Tabs>

@code{
    #region 示例1

    object[] data1 = new object[] {
        new  {
    date= "2018/8/1",
    type= "download",
    value= 4623,
  },
        new  {
    date= "2018/8/1",
    type= "register",
    value= 2208,
  },
        new  {
    date= "2018/8/1",
    type= "bill",
    value= 182,
  },
        new  {
    date= "2018/8/2",
    type= "download",
    value= 6145,
  },
        new  {
    date= "2018/8/2",
    type= "register",
    value= 2016,
  },
        new  {
    date= "2018/8/2",
    type= "bill",
    value= 257,
  },
        new  {
    date= "2018/8/3",
    type= "download",
    value= 508,
  },
        new  {
    date= "2018/8/3",
    type= "register",
    value= 2916,
  },
        new  {
    date= "2018/8/3",
    type= "bill",
    value= 289,
  },
        new  {
    date= "2018/8/4",
    type= "download",
    value= 6268,
  },
        new  {
    date= "2018/8/4",
    type= "register",
    value= 4512,
  },
        new  {
    date= "2018/8/4",
    type= "bill",
    value= 428,
  },
        new  {
    date= "2018/8/5",
    type= "download",
    value= 6411,
  },
        new  {
    date= "2018/8/5",
    type= "register",
    value= 8281,
  },
        new  {
    date= "2018/8/5",
    type= "bill",
    value= 619,
  },
        new  {
    date= "2018/8/6",
    type= "download",
    value= 1890,
  },
        new  {
    date= "2018/8/6",
    type= "register",
    value= 2008,
  },
        new  {
    date= "2018/8/6",
    type= "bill",
    value= 87,
  },
        new  {
    date= "2018/8/7",
    type= "download",
    value= 4251,
  },
        new  {
    date= "2018/8/7",
    type= "register",
    value= 1963,
  },
        new  {
    date= "2018/8/7",
    type= "bill",
    value= 706,
  },
        new  {
    date= "2018/8/8",
    type= "download",
    value= 2978,
  },
        new  {
    date= "2018/8/8",
    type= "register",
    value= 2367,
  },
        new  {
    date= "2018/8/8",
    type= "bill",
    value= 387,
  },
        new  {
    date= "2018/8/9",
    type= "download",
    value= 3880,
  },
        new  {
    date= "2018/8/9",
    type= "register",
    value= 2956,
  },
        new  {
    date= "2018/8/9",
    type= "bill",
    value= 488,
  },
        new  {
    date= "2018/8/10",
    type= "download",
    value= 3606,
  },
        new  {
    date= "2018/8/10",
    type= "register",
    value= 678,
  },
        new  {
    date= "2018/8/10",
    type= "bill",
    value= 507,
  },
        new  {
    date= "2018/8/11",
    type= "download",
    value= 4311,
  },
        new  {
    date= "2018/8/11",
    type= "register",
    value= 3188,
  },
        new  {
    date= "2018/8/11",
    type= "bill",
    value= 548,
  },
        new  {
    date= "2018/8/12",
    type= "download",
    value= 4116,
  },
        new  {
    date= "2018/8/12",
    type= "register",
    value= 3491,
  },
        new  {
    date= "2018/8/12",
    type= "bill",
    value= 456,
  },
        new  {
    date= "2018/8/13",
    type= "download",
    value= 6419,
  },
        new  {
    date= "2018/8/13",
    type= "register",
    value= 2852,
  },
        new  {
    date= "2018/8/13",
    type= "bill",
    value= 689,
  },
        new  {
    date= "2018/8/14",
    type= "download",
    value= 1643,
  },
        new  {
    date= "2018/8/14",
    type= "register",
    value= 4788,
  },
        new  {
    date= "2018/8/14",
    type= "bill",
    value= 280,
  },
        new  {
    date= "2018/8/15",
    type= "download",
    value= 445,
  },
        new  {
    date= "2018/8/15",
    type= "register",
    value= 4319,
  },
        new  {
    date= "2018/8/15",
    type= "bill",
    value= 176,
  },
};

    StepLineConfig config1 = new StepLineConfig()
    {
        Title = new Charts.Title()
        {
            Visible = true,
            Text = "多阶梯折线图",
        },
        Description = new Description()
        {
            Visible = true,
            Text = "将数据按照某一字段进行分组，用于比对不同类型数据的趋势和变化。",
        },
        Padding = "auto",
        ForceFit = true,
        XField = "date",
        YField = "value",
        YAxis = new ValueAxis()
        {
            Label = new BaseAxisLabel()
            {
                // 数值格式化为千分位
            },
        },
        Legend = new Legend()
        {
            Position = "right-top",
        },
        SeriesField = "type",
        @*responsive = true,*@
    };


    #endregion 示例1

}
